<!--
作者: 陈圳佳
日期: 2015/8/13
时间: 16:14
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../commons/inc.jsp" %>

<ul class="breadcrumb">
    <li>销售管理</li>
    <li class="active">添加销售单</li>
</ul>
<div class="modal fade" id="goods-dialog" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span></button>
                <h6 class="modal-title">销售的商品</h6>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="customName" class="col-sm-2 control-label">客户:</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control input-sm" readonly id="customName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="goods" class="col-sm-2 control-label">商品:</label>

                        <div class="col-sm-9">
                            <select id="goods"
                                    class="form-control select select-primary select-block input-sm"
                                    ng-model="formValue.goods">
                                <option value="-1" selected>请选择商品</option>
                                <c:forEach items="${goodsList}" var="goods">
                                    <option value="${goods.id}">${goods.goodsName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">单价:</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control input-sm" readonly id="price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="date" class="col-sm-2 control-label">日期:</label>

                        <div class="col-sm-9">
                            <input type="date" class="form-control input-sm" id="date">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="total" class="col-sm-2 control-label">数量:</label>

                        <div class="col-sm-9">
                            <input type="number" class="form-control input-sm" id="total">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save()">确认保存</button>
            </div>
        </div>
    </div>
</div>
<div class="container" ng-controller="Edit"
     ng-init="formValue.customId=''">
    <input type="hidden" ng-init="formConfig.action='${ctx}/manage/sales'"/>

    <div style="margin-bottom: 20px">
        <select id="custom"
                class="form-control select select-primary select-block"
                ng-model="formValue.customId">
            <option value="-1" selected>请选择客户</option>
            <c:forEach items="${customs}" var="custom">
                <option value="${custom.id}">${custom.customName}</option>
            </c:forEach>
        </select>
        <button type="button" class="btn btn-inverse"
                onclick="showEditDialog('${ctx}/manage/custom/edit.html?desc=dialog')">
            <span class="glyphicon glyphicon-plus"></span> 添加客户
        </button>
        <button type="button" class="btn btn-primary" onclick="showGoodsDialog()">
            <span class="glyphicon glyphicon-plus"></span> 添加销售的商品
        </button>
        <a type="button" class="btn btn-warning" href="${ctx}/manage/sales/edit.html">
            <span class="glyphicon glyphicon-refresh"></span> 重置
        </a>

        <form style="display: inline" ng-submit="submit()">
            <button type="submit" class="btn btn-info">
                <span class="glyphicon glyphicon-ok"></span> 确认提交
            </button>
        </form>
    </div>
    <table class="table table-condensed table-bordered">
        <thead>
        <tr>
            <th>客户</th>
            <th>商品</th>
            <th>单价(元)</th>
            <th>日期</th>
            <th>数量</th>
            <th>总价</th>
            <th width="5%">操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script>
    // 已添加商品的数量
    globalObj.number = [];
    globalObj.outPrice = 0;
    globalObj.goodsCount = 0;
    globalObj.goodsIds = 0;
    globalObj.successCall = function (resp) {
        if (resp.status)
            $.pjax({url: '${ctx}/manage/sales/edit.html', container: '#content'});
    };
    globalObj.callback = function () {
        $("#custom").select2().on("change", function (e) {
            if (e.val == -1) return;
            var $scope = angular.element($("[ng-controller='Edit']")[0]).scope();
            $scope.formValue.customId = e.val;
            $scope.$apply();
            $("#customName").val(e.added.text);
        });
        $("#goods").select2().on("change", function (e) {
                    if (e.val == -1) return;
                    globalObj.goodsIds = parseInt(e.val);
                    $.ajax({
                        url: getMangePath() + "/goods/" + e.val,
                        type: "GET",
                        dataType: "json",
                        success: function (resp) {
                            $("#price").val(resp.goods.outPrice);
                            globalObj.outPrice = parseInt(resp.goods.outPrice);
                            var number = globalObj.number[globalObj.goodsIds];
                            if (number == undefined)
                                globalObj.number[globalObj.goodsIds] = parseInt(resp.goods.number);
                        }
                    });
                }
        )
    };
    //显示添加商品模态框
    function showGoodsDialog() {
        var val = parseInt($("#custom").val());
        if (!showError("请先选择客户再添加商品哦", val)) return;
        $('#goods-dialog').modal('show');
    }
    //保存商品
    function save() {
        var $goodsInput = $("#goods");
        var goodsId = parseInt($goodsInput.val());
        if (!showError("请选择商品", goodsId)) return;
        var total = parseInt($("#total").val());
        if (total > globalObj.number[globalObj.goodsIds]) {
            showErrorMessage("对不起!貌似库存不够了,此商品现在还剩余:" + globalObj.number[globalObj.goodsIds]);
            return;
        } else globalObj.number[globalObj.goodsIds] -= total;
        var goodsName = $goodsInput.find("option:selected").text();
        var price = $("#price").val();
        var date = $("#date").val();
        var totalPrice = price * total;
        var $scope = angular.element($("[ng-controller='Edit']")[0]).scope();
        $scope.formValue.sellDate = date;
        if (globalObj.goodsCount == 0) {
            $scope.formValue.infoGoods = [];
        }
        $scope.formValue.infoGoods[globalObj.goodsCount] = {total: total, price: globalObj.outPrice, goodsId: goodsId};
        $scope.$apply();
        var $custom = $("#custom");
        var html = "<tr><td>" + $custom.find("option:selected").text() +
                "</td><td>" + goodsName + "</td><td>" + price + "</td><td>" +
                date + "</td><td>" + total + "</td><td>" + totalPrice +
                "</td><td><a class='glyphicon glyphicon-trash' onclick='delRow(this," + globalObj.goodsCount + ")' href='javascript:void(0)'></a></td>" +
                "</tr>";
        $("table tbody").append(html);
        $('#goods-dialog').modal('hide').find("input[id!=customName][id!=price]").val("");
        globalObj.goodsCount++;
        $custom.select2("disable");
    }
    // 显示错误
    function showError(msg, int) {
        if (isNaN(int) || int <= 0) {
            showErrorMessage(msg);
            return false;
        }
        return true;
    }
    //删除行
    function delRow(obj, c) {
        $(obj).parent().parent().remove();
        var $scope = angular.element($("[ng-controller='Edit']")[0]).scope();
        globalObj.number[globalObj.goodsIds] += $scope.formValue.infoGoods[c].total;
        globalObj.goodsCount--;
        if (globalObj.goodsCount == 0) {
            $("#custom").select2("enable");
        }
    }
</script>